<template>
  <div>
    <el-alert title="查询信息" type="info" :closable="false"></el-alert>
    <el-form inline :model="form">
      <el-form-item label="监测体">
        <el-select
          placeholder="请选择监测体"
          v-model="form.monitorId"
          clearable
        >
          <el-option
            v-for="(item, index) in monitorList"
            :key="index"
            :label="item.value"
            :value="Number(item.key)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参考系名">
        <el-input
          placeholder="请输入参考系名"
          v-model="form.referenceName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-alert title="参考系信息列表" type="info" :closable="false"></el-alert>
    <el-table :data="tableData" stripe>
      <el-table-column
        label="参考系名"
        prop="referenceName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="所属监测体"
        prop="monitorName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="修改时间"
        prop="updateTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="备注"
        prop="remark"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="modify(scope.row)"
            >修改</el-link
          >&nbsp;
          <el-link type="primary" :underline="false" @click="del(scope.row)"
            >删除</el-link
          >&nbsp;
          <el-link type="primary" :underline="false" @click="bind(scope.row)"
            >绑定传感器</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          background
          :current-page="pageData.currentPage"
          layout="total, prev, pager, next, jumper"
          :total="pageData.count"
          :page-size="pageData.pageSize"
          @current-change="handleCurrentChange"
          v-if="pageData.count && pageData.count != 0"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="增加参考系" :visible.sync="addReference" width="20%">
      <img src="../../assets/img/referenceDmo.jpg" alt="" width="100%" />
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        size="mini"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="参考系名称" prop="referenceName">
          <el-input
            v-model="addForm.referenceName"
            placeholder="请输入参考系名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="监测体">
          <el-select
            v-model="addForm.monitorId"
            placeholder="请选择监测体"
            clearable
            style="display: flex"
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交点经度L(°)" prop="x1">
          <el-input
            v-model="addForm.x1"
            placeholder="请输入交点经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="交点纬度B(°)" prop="y1">
          <el-input
            v-model="addForm.y1"
            placeholder="请输入交点纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="水平经度L(°)" prop="x2">
          <el-input
            v-model="addForm.x2"
            placeholder="请输入水平经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="水平纬度B(°)" prop="y2">
          <el-input
            v-model="addForm.y2"
            placeholder="请输入水平纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="垂直经度L(°)" prop="x3">
          <el-input
            v-model="addForm.x3"
            placeholder="请输入垂直经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="垂直纬度B(°)" prop="y3">
          <el-input
            v-model="addForm.y3"
            placeholder="请输入垂直纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="addForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addReference = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handle" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改参考系" :visible.sync="modifyReference" width="20%">
      <img src="../../assets/img/referenceDmo.jpg" alt="" width="100%" />
      <el-form
        :model="modifyForm"
        ref="modifyForm"
        :rules="rules"
        size="mini"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="参考系名称" prop="referenceName">
          <el-input
            v-model="modifyForm.referenceName"
            placeholder="请输入参考系名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="监测体">
          <el-select
            v-model="modifyForm.monitorId"
            placeholder="请选择监测体"
            clearable
            style="display: flex"
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交点经度L(°)" prop="x1">
          <el-input
            v-model="modifyForm.x1"
            placeholder="请输入交点经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="交点纬度B(°)" prop="y1">
          <el-input
            v-model="modifyForm.y1"
            placeholder="请输入交点纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="水平经度L(°)" prop="x2">
          <el-input
            v-model="modifyForm.x2"
            placeholder="请输入水平经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="水平纬度B(°)" prop="y2">
          <el-input
            v-model="modifyForm.y2"
            placeholder="请输入水平纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="垂直经度L(°)" prop="x3">
          <el-input
            v-model="modifyForm.x3"
            placeholder="请输入垂直经度L(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="垂直纬度B(°)" prop="y3">
          <el-input
            v-model="modifyForm.y3"
            placeholder="请输入垂直纬度B(°)"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="modifyForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyReference = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="handle2" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="绑定监测体菜单" :visible.sync="bindSensor" width="20%">
      <el-scrollbar style="height: 300px">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          :default-checked-keys="defaultCheckedKeys"
          ref="tree"
          :props="defaultProps"
        >
        </el-tree>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindSensor = false">取 消</el-button>
        <el-button type="primary" @click="handle3">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "ReferenceSystem",
  data() {
    return {
      monitorList: null,
      form: {
        monitorId: "",
        referenceName: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      addReference: false,
      addForm: {
        referenceName: "",
        monitorId: "",
        x1: "",
        y1: "",
        x2: "",
        y2: "",
        x3: "",
        y3: "",
        remark: "",
      },
      modifyReference: false,
      modifyForm: {
        referenceName: "",
        monitorId: "",
        x1: "",
        y1: "",
        x2: "",
        y2: "",
        x3: "",
        y3: "",
        remark: "",
      },
      bindSensor: false,
      treeData: null,
      defaultCheckedKeys: [],
      defaultProps: {
        label: "name",
      },
      referenceId: null,
      rules: {
        referenceName: [
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "不支持特殊字符！",
            trigger: "blur",
          },
        ],
        x1: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        y1: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        x2: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        y2: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        x3: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        y3: [
          {
            pattern: /^[0-9\s]+$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        remark: [
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "不支持特殊字符！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    queryReferenceList(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"monitorId\\":\\"${queryData.monitorId}\\",\\"referenceName\\":\\"${queryData.referenceName}\\"}","serviceCode":"listReferenceFrameByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData = res.data.parameter.page;
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          list[i].updateTime = moment(list[i].updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          list[i].createTime = moment(list[i].createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        this.tableData = list;
      });
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        monitorId: this.form.monitorId,
        referenceName: this.form.referenceName,
      };
      this.queryReferenceList(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    add() {
      this.addReference = true;
      this.addForm = {
        referenceName: "",
        monitorName: "",
        x1: "",
        y1: "",
        x2: "",
        y2: "",
        x3: "",
        y3: "",
        remark: "",
      };
    },
    handle() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addReference = false;
          let queryData = {
            referenceName: this.addForm.referenceName,
            monitorId: this.addForm.monitorId,
            x1: this.addForm.x1,
            y1: this.addForm.y1,
            x2: this.addForm.x2,
            y2: this.addForm.y2,
            x3: this.addForm.x3,
            y3: this.addForm.y3,
            remark: this.addForm.remark,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"referenceName\\":\\"${queryData.referenceName}\\",\\"monitorId\\":\\"${queryData.monitorId}\\",\\"x1\\":\\"${queryData.x1}\\",\\"y1\\":\\"${queryData.y1}\\",\\"x2\\":\\"${queryData.x2}\\",\\"y2\\":\\"${queryData.y2}\\",\\"x3\\":\\"${queryData.x3}\\",\\"y3\\":\\"${queryData.y3}\\",\\"remark\\":\\"${queryData.remark}\\"}","serviceCode":"addReferenceFrame","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    monitorId: "",
                    referenceName: "",
                  };
                  this.queryReferenceList(queryData);
                },
              });
            } else {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    modify(row) {
      this.modifyReference = true;
      this.modifyForm = Object.assign({}, row);
      this.modifyForm.monitorId = Number(row.monitorId);
    },
    handle2() {
      this.$refs["modifyForm"].validate((valid) => {
        if (valid) {
          this.modifyReference = false;
          let queryData = {
            referenceName: this.modifyForm.referenceName,
            monitorId: this.modifyForm.monitorId,
            x1: this.modifyForm.x1,
            y1: this.modifyForm.y1,
            x2: this.modifyForm.x2,
            y2: this.modifyForm.y2,
            x3: this.modifyForm.x3,
            y3: this.modifyForm.y3,
            remark: this.modifyForm.remark,
            id: this.modifyForm.id,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"referenceName\\":\\"${queryData.referenceName}\\",\\"monitorId\\":\\"${queryData.monitorId}\\",\\"x1\\":\\"${queryData.x1}\\",\\"y1\\":\\"${queryData.y1}\\",\\"x2\\":\\"${queryData.x2}\\",\\"y2\\":\\"${queryData.y2}\\",\\"x3\\":\\"${queryData.x3}\\",\\"y3\\":\\"${queryData.y3}\\",\\"remark\\":\\"${queryData.remark}\\",\\"id\\":\\"${queryData.id}\\"}","serviceCode":"updateReferenceFrame","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    monitorId: "",
                    referenceName: "",
                  };
                  this.queryReferenceList(queryData);
                },
              });
            } else {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    del(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除参考系", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${row.id}\\"}","serviceCode":"deleteReferenceFrame","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            this.$message({
              type: "success",
              message: message,
              duration: 1000,
              onClose: () => {
                let queryData = {
                  currentPage: "1",
                  monitorId: "",
                  referenceName: "",
                };
                this.queryReferenceList(queryData);
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
    bind(row) {
      this.bindSensor = true;
      this.referenceId = row.id;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"referenceId\\":\\"${row.id}\\",\\"monitorId\\":\\"${row.monitorId}\\"}","serviceCode":"listReferenceSensor","timestamp":"","uuid":""}`,
      }).then((res) => {
        (this.treeData = null), (this.defaultCheckedKeys = []);
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          if (list[i].checked == "true") {
            this.defaultCheckedKeys.push(list[i].id);
          }
        }
        this.treeData = list;
      });
    },
    handle3() {
      this.bindSensor = false;
      let arr = this.$refs.tree.getCheckedKeys();
      arr = JSON.stringify(arr);
      arr = arr.replace(/\"/g, '\\"');
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"referenceId\\":\\"${this.referenceId}\\",\\"sensorIds\\":${arr}}","serviceCode":"bindReferenceSensor","timestamp":"","uuid":""}`,
      }).then((res) => {
        let resultCode = res.data.resultcode;
        let message = res.data.parameter.message;
        if (resultCode == "0000") {
          this.$message({
            message: message,
            type: "success",
          });
        } else {
          this.$message({
            message: message,
            type: "warning",
          });
        }
      });
    },
  },
  created() {
    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"type\\":\\"2\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.monitorList = res.data.parameter.list;
      });
      let queryData = {
        currentPage: "1",
        monitorId: "",
        referenceName: "",
      };
      this.queryReferenceList(queryData);
    };
    fun();
  },
};
</script>

<style lang="less" scoped>
.el-alert {
  line-height: 30px;
  margin-top: 20px;
  /deep/ .el-alert__title {
    font-size: 16px;
  }
}
.el-form {
  margin: 20px 0;
  margin-left: 30px;
}
/deep/ .el-dialog {
  margin: 50px auto !important;
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>